<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
HTML内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。
浏览上下文是一個浏览器(browser)展示文檔(Document)的環境（正常來説是一個現在的標簽，但也有可能是一個窗體或是一個框架裏面的頁面）。
每個浏览上下文都有一個特定的活動文檔來源origin並按順序列出所有文檔的历史记录。
浏览上下文之間的通訊被嚴格限制。衹有浏览上下文來自于同樣的來源，一個廣播信道(BroadcastChannel)才能被打開和使用。
-->
<!--
页面上的每个<iframe>都需要增加内存和其它计算资源，这是因为每个浏览上下文都拥有完整的文档环境。
虽然理论上来说你能够在代码中写出来无限多的<iframe>，但是你最好还是先看看这么做会不会导致某些性能问题。
-->
<!--<iframe id="inlineFrameExample"
        title="Inline Frame Example"
        width="300"
        height="200"
        src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>-->

<iframe title="Wikipedia page for Avocados" src="demo.html" frameborder="1"></iframe>
<button type="button">改变hash数据</button>
<script>
    window.onload = function(){
        let iframeNode = document.querySelector('iframe');
        // HTMLIFrameElement 接口提供了除 HTMLElement 之外的一些特殊属性和方法（当然也包括了继承自 HTMLElement 的部分）。
        // 这些额外的属性或方法用于操作内联frame元素的布局和展示。
        HTMLIFrameElement = iframeNode;
        console.log(HTMLIFrameElement.src, HTMLIFrameElement.allowFullscreen)

        // Window.frames 返回当前窗口，一个类数组对象，列出了当前窗口的所有直接子窗口。
        // frameList是一个frame对象的集合，它类似一个数组，有length属性且可以使用索引（[i]）来访问。
        // frameList === window 计算结果为true。
        // 在window.frames类数组中的每一项都代表了窗口对应给定对象的<frame>或<iframe>的内容，而不是(i)frame DOM元素（即window.frames[ 0 ]与document.getElementsByTagName( "iframe" )[ 0 ].contentWindow是相同的）。
        var frames = window.frames; // 或 // var frames = window.parent.frames;
        for (var i = 0; i < frames.length; i++) {
            // 在这对frames的一个frame做点什么
            frames[i].document.body.style.background = "#ddd";
        }


        // 跨域通信可以通过 hash 或者 window.postMessage 来实现。
        // 但通过URl中的hash方法适用于父级窗体向子窗体发送数据。如我们通过改变iframe的src中hash参数，向子窗体发送数据，因为改变hash不会让浏览器重新加载
        let a = 1
        let sourceSrc  = iframeNode.src;
        function changeHashData(){
            iframeNode.src =`${sourceSrc}/#/a=${a}&b=${a*a}`;
            console.log(iframeNode.src)
            a ++
        }
        document.getElementsByTagName('button')[0].onclick = changeHashData

        // 接受子窗体向父窗体发送来的数据
        // 注意：如果不限制origin和source属性可能会被跨站点脚本攻击。
        // postMessage的调用者不可能检测到postMessage发送的事件的事件处理程序何时抛出异常。
        window.addEventListener('message', function (event) {
            console.log(event.origin); //如：http://a.com
            console.log(event.source); //对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。如event.source.postMessage()
            console.log(event.data); //接受数据
        }, false)
    }
</script>
</body>
</html>